<template>
	<div id="view-activity-index" class="register">
		<section class="head">
			<img src="/static/images/register/bkg_01.png" class="bkg" alt="">
		</section>
		<section class="block">
			<img src="/static/images/register/bkg_02.png" class="bkg" alt="">
			<div id="register-form" class="register-form">
				<label>
					<input id="phone-input" name="phone" type="text" placeholder="请输入手机号码" maxlength="11" autocomplete="off" disableautocomplete>
				</label>
				<div class="img-pic">
					<img id="image-code-picture" src="//ac.ppdai.com/ValidateCode/Image?tmp=8706" alt="图形验证码">
					<a id="image-code-button">
						<img src="/static/images/register/icon_refresh.png" alt="">
					</a>
				</div>
				<label>
					<input id="image-code-input" name="img" type="text" placeholder="请输入图形验证码" maxlength="4" autocomplete="off" disableautocomplete>
				</label>
				<label>
					<input id="sms-code-input" name="sms" type="text" placeholder="请输入短信验证码" maxlength="6" autocomplete="off" disableautocomplete>
				</label>
				<div class="sms-btn">
					<a id="sms-code-button">获取验证码</a>
					<span>60s</span>
				</div>
				<label>
					<input id="password-input" name="password" type="password" placeholder="请设置密码，6-16位，需包含字母和数字" maxlength="16" autocomplete="off" disableautocomplete>
				</label>
				<a id="register-form-submit" class="submit">下载App 领50000额度</a>
				<p class="protocol">
					注册即同意
					<a id="user-service-protocol" href="//landing.ppdaicdn.com/M_Terms.html" target="_blank">《用户服务协议》</a>
					和
					<a id="borrower-protocol" href="//landing.ppdaicdn.com/M_Borrower_Policy.html" target="_blank">《借入者协议》</a>
				</p>
			</div>
		</section>
		<section class="block">
			<img src="/static/images/register/bkg_03.png" class="bkg" alt="">
			<a id="to-top-button" @click="toTop" class="to-top"></a>
		</section>
		<section class="block">
			<img src="/static/images/register/bkg_04.png" class="bkg" alt="">
		</section>
		<section class="foot block">
			<img src="/static/images/register/bkg_05.png" class="bkg" alt="">
		</section>
		<div id="error-alert" class="alert error-alert">
			<div>
				<p id="error-message"></p>
			</div>
		</div>
		<div id="download-alert" class="alert download-alert">
			<div>
				<img src="/static/images/register/download_alert.png" alt="">
				<h2></h2>
				<p></p>
				<a id="app-download" class="download">下载App 领50000额度</a>
			</div>
		</div>
	</div>
</template>

<script>
	/*const GetQueryString = function (name) {
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.search.substr(1).match(reg);
		return r ? r[2] : null;
	};*/

	export default {
		'name': 'view-activity-index',
		data() {
			return {
				'source': this.$route.query.source,
				'valuePhone': '',
				'valueImgCode': '',
				'valueSMSCode': '',
				'valuePassword': '',
				'newId': '',
				'errMsg': '',
				'sendTimeout': null,
				'errorAlertTimeout': null
			};
		},
		'methods': {
			toTop() {
				document.body.scrollTop = 0;
			}/*,
			validPhone() {
				if (this.valuePhone.length == 0) {
					this.errorShow('请先输入手机号');
					return false;
				} else if (!/^1[34578]\d{9}$/.test(phone)) {
					this.errorShow('手机号格式错误，请重新输入');
					return false;
				}
				return true;
			},
			validImgCode() {
				if (this.valueImgCode.length == 0) {
					this.errorShow('请先输入图形验证码');
					return false;
				}
				return true;
			},
			validSMSCode() {
				if (this.valueSMSCode.length == 0) {
					this.errorShow('请先输入短信验证码');
					return false;
				}
				return true;
			},
			validPassword() {
				if (this.valuePassword.length == 0) {
					this.errorShow('请先设置密码');
					return false;
				}
				if (!/^[0-9A-Za-z]{6,16}$/.test(password) || !/[A-Za-z]/.test(password) || !/[0-9]/.test(password)) {
					this.errorShow('密码格式错误，请重新输入');
					return false;
				}
				return true;
			},
			sendSMSCode() {
				return $.get('//ac.ppdai.com/ValidateCode/MobileWithImgCode', {
					'mobilePhone': this.valuePhone,
					'imgCode': this.valueImgCode
				});
			},
			setResendStatus(sec) {
				$('#sms-code-button').next().html(sec + 's');
				if (sec == 0) {
					clearTimeout(sendTimeout);
					$('#sms-code-button').next().html('60s').parent().removeClass('sending');
					return;
				}
				sendTimeout = setTimeout(function () {
					setResendStatus(sec - 1);
				}, 1000);
			},
			checkImgCode() {
				return $.get('//ac.ppdai.com/registercheck', {
					'name': 'imgvalidatecode',
					'value': valueImgCode
				});
			},
			checkSMSCode() {
				return $.get('//ac.ppdai.com/registercheck', {
					'name': 'mobilevalidatecode',
					'value': valueSMSCode + ',' + valuePhone
				});
			},
			errorShow(msg) {
				this.errorHide();
				$('#error-alert').find('#error-message').html(msg)
					.end().addClass('show');
				this.errorAlertTimeout = setTimeout(this.errorHide, 2000);
			},
			errorHide() {
				$('#error-alert').find('#error-message').html('')
					.end().removeClass('show');
				clearTimeout(this.errorAlertTimeout);
			},
			showRegisteredUserAlert() {
				$('#download-alert').find('h2').html('拍拍贷老用户直接下载')
					.end().find('p').html('还卡超人是拍拍贷旗下信用卡代偿产品，您可以直接使用拍拍贷账号登录还卡超人App领取额度哦～')
					.end().addClass('show');
			},
			showNewUserAlert() {
				$('#download-alert').find('h2').html('下载还卡超人App')
					.end().find('p').html('恭喜您注册成功！ 10元红包已放入您的账户， 快去下载还卡超人领取吧～')
					.end().addClass('show');
			}*/
		}/*,
		created() {
		}*/
	};
</script>

<style scoped>
	.register {
		background-color: #698af6;
	}
	section {
		overflow: hidden;
		position: relative;
		margin: 0 4%;
		border-radius: 0.5em;
		background: linear-gradient(to bottom,#5b77ed,#7350eb) #6662eb;
	}
	.head,
	.foot {
		margin: 0;
		border-radius: 0;
		background: transparent;
	}
	.block + .block {
		margin-top: 5.33%;
	}
	.bkg {
		display: block;
		width: 100%;
	}
	.register-form {
		width: 91.3%;
		margin: 0 4.35%;
		font-size: 14px;
	}
	.register-form label {
		display: block;
		overflow: hidden;
		box-sizing: border-box;
		height: 2.8em;
		margin-top: 1.25em;
		padding: 0 1em;
		border-radius: 0.5em;
		line-height: 2.8em;
		background-color: #ffffff;
	}
	.register-form input {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: none;
		outline: none;
		background: transparent;
	}
	.img-pic {
		float: right;
		height: 2.8em;
		margin: 1.25em 0 0 1.25em;
	}
	.img-pic img,
	.img-pic a {
		float: left;
		height: 100%;
	}
	.img-pic a {
		height: 100%;
		margin-left: 0.5em;
	}
	.img-pic a img {
		width: 1.8em;
		height: 1.8em;
		margin: 0.5em 0;
	}
	.sms-btn {
		position: relative;
		float: right;
		height: 2.8em;
		margin-top: -2.8em;
		border-radius: 0.5em;
		line-height: 2.8em;
		background-color: #ffffff;
	}
	.sms-btn a,
	.sms-btn span {
		height: 100%;
	}
	.sms-btn a {
		display: block;
		padding: 0 1em;
		color: #519eec;
	}
	.sms-btn span {
		display: none;
		padding: 0 2em;
		color: #999999;
	}
	.sms-btn.sending a {
		display: none;
	}
	.sms-btn.sending span {
		display: block;
	}
	.submit {
		display: block;
		height: 2.3em;
		margin-top: 1.4em;
		border-radius: 0.36em;
		color: #3c44aa;
		text-align: center;
		line-height: 2.3em;
		font-size: 1.2em;
		background: linear-gradient(to bottom,#fef052,#f6d864) #fae45b;
	}
	.protocol,
	.protocol a {
		color: #ffffff;
	}
	.protocol {
		margin: 1.2em 0 2em;
	}
	.protocol a {
		text-decoration: none;
	}
	.to-top {
		position: absolute;
		left: 6%;
		bottom: 4.8%;
		width: 88%;
		height: 7%;
		background: transparent;
	}
	.alert {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	.alert.show {
		display: block;
	}
	.error-alert {
		background-color: transparent;
	}
	.error-alert div {
		position: relative;
		top: 50%;
		height: 2.8em;
		margin-top: -1.4em;
		text-align: center;
		line-height: 2.8em;
	}
	.error-alert p {
		display: inline-block;
		margin: 0;
		padding: 0 1.6em;
		border-radius: 0.4em;
		color: #ffffff;
		background-color: rgba(0,0,0,0.8);
	}
	.download-alert > div {
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 72%;
		margin-top: -45%;
		margin-left: -36%;
		border-radius: 0.5em;
		background-color: #ffffff;
	}
	.download-alert img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.download-alert h2,
	.download-alert p,
	.download-alert a {
		position: relative;
		text-align: center;
	}
	.download-alert h2 {
		height: 40px;
		margin: 15% 0 0;
		color: #ffffff;
		font-weight: normal;
		font-size: 1.4em;
	}
	.download-alert p {
		margin: 33% 10% 10%;
		line-height: 1.4;
	}
	.download-alert .download {
		display: block;
		width: 84%;
		height: 2.3em;
		margin: 0 auto 8%;
		border-radius: 0.36em;
		color: #3c44aa;
		line-height: 2.3em;
		font-size: 1.2em;
		background: linear-gradient(to bottom,#fef052,#f6d864) #fae45b;
	}
</style>
